<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 200px;
            height: 200px;
            background-color: pink;
            /* 
                2D转换中心点transform-origin
                我们可以设置元素转换的中心点
                语法
                    transform-origin: x y
                重点：
                    注意参数中的x和y要用空格隔开
                    x y的默认位置是50% 50%，也就是元素的中心点
                    也可以给x y设置 像素 或者 方位名词(top bottom left right center)

                比如这个例子中就是以左下角为转换的中心点
            */
            transform-origin: left bottom;
            transition: all 0.5s linear;
        }
        div:hover{
            /* 由于左下角是中心点，所以这个旋转效果就会以左下角为圆心 */
            transform: rotate(45deg);
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>